:global(:root) {
  --sidebar-width: 250px;
  --sidebar-collapse-width: 50px;
  --sidebar-transition-duration: 0.5s;
}

.root {
  --w: var(--sidebar-width);
  --duration: var(--sidebar-transition-duration);

  & .item-title {
    @apply transition-all max-w-[var(--w)] truncate;

    transition-duration: var(--duration);
  }
}

.root.collapse {
  --w: var(--sidebar-collapse-width);
}

.root.collapse {
  & .has-child {
    @apply pl-0;
  }

  & .sidebar {
    & .item {
      @apply pl-0;
    }

    & .active,
    & .expand,
    & .item:hover {
      border-radius: 0 !important;
    }
  }
}

.root.collapsed,
.root.collapsing {
  & .item-title {
    @apply overflow-hidden max-w-0 opacity-0;
  }

  & .sidebar .items {
    @apply px-0;
  }

  & .header-title,
  & .sidebar-username {
    @apply max-w-0 opacity-0;
  }
}

.root.collapsed {
  & .header-title,
  & .sidebar-username {
    @apply hidden;
  }
}

.root.expanding {
  & .sidebar-username {
    @apply delay-50;
  }
}

.root.expanded,
.root.expanding {
  & .header-title {
    @apply opacity-100;
  }
}

.header-title {
  @apply py-6 transition-all duration-[var(--duration)] truncate max-w-[var(--w)] overflow-clip;
}

.collapse-button {
  @apply absolute right-8 top-0 bottom-0 text-base;

  transition: right 0.5s;

  & .collapse-icon {
    @apply transition-transform;

    transition-duration: var(--duration);
  }
}

.toggle-color-btn {
  @apply absolute left-8 top-0 bottom-0 flex items-center text-base;

  transition: left 0.5s, opacity 0.5s;
}

.root.collapse {
  & .collapse-button {
    @apply absolute left-0 right-0 m-auto;

    & .collapse-icon {
      @apply transform rotate-180;
    }
  }

  & .toggle-color-btn {
    @apply -left-10 opacity-0;
  }

  & .collapse-button {
    @apply relative py-6 w-full flex items-center justify-center;
  }
}

.root {
  & .sidebar {
    width: var(--w);
    transition: width 0.5s;

    @apply flex flex-col;
    @apply bg-gray-100;
    @apply fixed left-0 top-0 overflow-hidden z-10 text-white;

    height: 100vh;
    height: -webkit-fill-available;
  }

  & .items {
    transition: padding var(--duration);

    @apply pl-4;
  }

  & .active,
  & .expand {
    background: #50b694;
    border-radius: 24px 0 0 24px;
  }

  & .item {
    transition: all var(--duration);

    @apply pl-4;

    @screen phone {
      & {
        @apply pl-0;
      }
    }
  }

  & .item:hover {
    background: #5eaa91;
    border-radius: 24px 0 0 24px;
  }

  & .has-child {
    transition: max-height 0.5s;
  }

  & .sidebar {
    background: linear-gradient(to bottom, rgb(42, 148, 125), #75ad9b);
  }

  & .menu {
    @apply flex-grow;

    @apply bg-transparent text-white;

    @screen phone {
      & {
        @apply overflow-auto;
      }
    }
  }
}

:global(html.dark) {
  & .root {
    & .sidebar {
      @apply bg-gray-700;

      filter: brightness(0.8);
    }
  }
}

.sidebar-footer {
  @apply w-[var(--w)] flex items-center justify-center my-4 transition-all duration-[var(--duration)] h-20 flex-shrink-0;
}

.sidebar-username {
  @apply pl-12 transition-all duration-[var(--duration)] truncate max-w-[var(--w)];
}
